<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" th:value= "${id} " id="id"  name="id" class="layui-input">
        </div>
    </div>
    <input type="hidden"  id="deptId"  name="deptId" class="layui-input">

    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
            <input type="username" id="username" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label ">密码</div>
        <div class="layui-input-inline">
            <input type="password" id="password"  name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label ">手机号</div>
        <div class="layui-input-inline">
            <input type="phone" id="phone" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" id="status"  name="status" lay-skin="switch" lay-filter="switch" lay-text="启用|禁用" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label ">所属部门</div>
        <div class="layui-input-inline">
            <input type="deptName" id="deptName" name="deptName" placeholder="请选择所属部门" autocomplete="off" class="layui-input"
                   readonly="readonly"  onclick="deptSelect()" style="background:#eeeeee!important">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit">确认保存</button>
        </div>
    </div>
</div>
<div id="deptTree" style="display: none"></div>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var tree = layui.tree;
    var curIfr = parent.layer.getFrameIndex(window.name);
    window.onload = function (){
        var id = $("#id").val();
        initTree();
        if(!CoreUtil.isEmpty(id)){
             CoreUtil.sendGet('/sys/user/'+id,null,function (res){
                $("#deptId").val(res.data.deptId);
                $("#username").val(res.data.username);
                $("#password").val("");
                $("#phone").val(res.data.phone);
                $("#deptName").val(res.data.deptName);
                if (res.data.status == 1) {
                    $("#status").attr('checked', 'checked');
                    $("#status").attr('type', 'hidden').val(1);
                    var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                    x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
                    var d = document.getElementsByTagName('em')[0];
                    d.firstChild.nodeValue = '启用';
                } else {
                    $("#status").attr('type', 'hidden').removeAttr("checked").val(2);
                    var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                    x[0].setAttribute("class", "layui-unselect layui-form-switch");
                    var d = document.getElementsByTagName('em')[0];
                    d.firstChild.nodeValue = '禁用';
                }
             });
        }else{
            $("#status").attr('checked', 'checked');
            $("#status").attr('type', 'hidden').val(1);
            var x = document.getElementsByClassName("layui-unselect layui-form-switch");
            x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '启用';
        }
    }
    function deptSelect(){
        layer.open({
            type: 1,
            title: "选择部门",
            area: ['80%', '80%'],
            shade: 0,
            shadeClose: false, //开启遮罩关闭
            content: jQuery("#deptTree"),
            btn: ['确定', '取消'],
            yes: function (index) {
                if (selectNode.data != null) {
                    //选中回显
                    $("#deptId").val(selectNode.data.id);
                    $("#deptName").val(selectNode.data.title);
                }
                layer.close(index);
            }
        });
    };

    function initTree(){
        CoreUtil.sendGet("/sys/dept/tree", null, function (res) {
            loadDeptTree(res.data);
        });
    }

    var loadDeptTree = function (data) {
        tree.render({
            elem: '#deptTree'
            , data: data
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
                selectNode = obj;
                layer.msg(JSON.stringify(selectNode.data.title));
            }
        });
    };
    form.on('switch(switch)', function () {
        $("#status").attr('type', 'hidden').val(this.checked ? 1 : 2);
    });

    form.on('submit(submit)', function (data) {
        if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
            CoreUtil.sendPost("/sys/user", data.field, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        } else {
            CoreUtil.sendPut("/sys/user", data.field, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        }
        return false;
    });
</script>
</body>
</html>